<template class="firstpage">
  <div>
    <div class="boxMargin">
      <el-row>
        <el-col :span="10">
          <p class="title">商品主图</p>
          <div style="display:flex;">
            <div class="drawing_div">
              <img :src="customData.graphImage" alt="" style="max-width:100%;max-height:100%">
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <p class="title">商品图</p>
          <div style="display:flex;flex-wrap: wrap;">
            <div v-for="(item,index) in customData.commodityMap" :key="index" style="margin-right:10px;flex:none;width:136px;height:230px;">
              <div class="drawing_div" style="margin-bottom:10px;">
                <img v-if="item.displayUrl != undefined && item.displayUrl != null && item.displayUrl != ''" :src="item.displayUrl" alt="" style="max-width:100%;max-height:100%">
              </div>
              <!-- <el-button type="primary" style="margin-left:0;margin-top:10px" class="buttonWidht" size="small" @click="previewImg(item)">预览</el-button> -->
            </div>
            <div v-if="customData.commodityMap.length == 0" class="drawing_div" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <p class="title">素材图</p>
          <div style="display:flex;flex-wrap: wrap;">
            <div v-for="(item,index) in customData.materialMap" :key="index" style="margin-right:10px;flex:none;width:136px;height:230px;">
              <div class="drawing_div" style="margin-bottom:10px;">
                <img v-if="item.uploadId != undefined && item.uploadId != null && item.uploadId != ''" :src="item.extDomain + item.imagePreview + item.uploadId" alt="" style="max-width:100%;max-height:100%">
              </div>
              <!-- <el-button type="primary" style="margin-left:0;margin-top:10px" class="buttonWidht" size="small" @click="previewImg(item)">预览</el-button> -->
            </div>
            <div v-if="customData.materialMap.length == 0" class="drawing_div" />
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="预览" class="previewBox" :visible.sync="customData.previewShow" @close="closeDialogs">
      <div id="previews">
        <div style="width:100%;height:563px;box-sizing:border-box;display:flex;background-color: #fbfdff;justify-content: center;align-items: center;">
          <img v-if="customData.previewObj.uploadId != undefined && customData.previewObj.uploadId != null && customData.previewObj.uploadId != ''" :src="customData.previewObj.extDomain + customData.previewObj.imagePreview + customData.previewObj.uploadId" alt="" style="max-width:100%;max-height:100%">
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery'
import _validate from '../../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../../framework/commonJs/wptx_tools'
import _common from '../../../../../framework/commonJs/wptx_common'
import { global } from '../../../../../filter/global-api'
import _api from '../../../../../framework/API/generalItem'
const _FUNCTION_NAME = ''
export default {
  filters: {},
  data() {
    return {
      tableData: [],
      searchData: {
      },
      searchDataBuffer: {
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      customData: {
        activeName: 'first',
        basic: true,
        graphImage: '',
        drawingImage: '',
        masterItemId: '',
        file: [],
        commodityMap: [], // 商品图
        materialMap: [], // 素材图
        transparencyDrawing: [], // 透明图
        imageType: '',
        previewShow: false,
        previewObj: {},
        uploadType: ''
      },
      form: {},
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    onInit(data) {
      const self = this
      self.customData.masterItemId = self.$route.query.itemId
      const params = {
        masterItemId: self.$route.query.itemId
      }
      _api.imageDetail(self, params, self.callBack_imageDetail)
    },
    onSearch(data) {
      const self = this
    },
    onChangePage(data) {
      const self = this
    },
    onReset(data) {
      const self = this
    },
    onAdd(data) { },
    onDelete(data) {
      const self = this
    },
    onInfo(data) {
      const self = this
    },
    onUpdate(formName) {
      const self = this
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_imageDetail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        if (data.data.length != 0) {
          data.data.forEach(item => {
            if (item.imageType == 2) {
              self.customData.commodityMap.push(item)
            } else if (item.imageType == 4) {
              self.customData.materialMap.push(item)
            }
          })
        }
        if (self.customData.commodityMap.length != 0) {
          const graphUrl = self.customData.commodityMap[0].displayUrl
          self.customData.graphImage = graphUrl
        }
      }
    },
    previewImg(data) {
      const self = this
      self.customData.previewObj = data
      self.customData.previewShow = true
    },
    closeDialogs() {
      const self = this
      self.customData.previewObj = {}
      self.customData.previewShow = false
    }
  }
}
</script>
<style scoped>
.drawing_div{
    border-radius: 6px;
    background-color: #fbfdff;
    width:136px;
    height:136px;
    box-sizing:border-box;
    border:1px dashed #c0ccda;
    display:flex;
    justify-content: center;
    align-items: center;
}
.title{
    font-size: 15px;
}
.buttonWidht{
    width: 100%;
}
</style>
